<template>
	<view class="mainBody">
		<view class="topSearch">
			<u--input class="search" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				placeholder="搜索职位名称、公司"></u--input>
		</view>
		<view class="mainstay">
			<u-tabs :list="list1">
				<view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
					<u-icon name="plus" size="21" bold></u-icon>
				</view>
			</u-tabs>
			<u-line style="position: relative;top: -3px;"></u-line>
			<u-tabs :list="list2" lineColor='#fff'>
				<view slot="right" style="padding-left: 4px;display: flex;" @tap="$u.toast('插槽被点击')">
					<u-tag text="武汉" size="mini" plain style="margin-right: 5px;"></u-tag>
					<u-tag text="筛选" size="mini" plain></u-tag>
				</view>
			</u-tabs>
			<u-line style="position: relative;top: -3px;"></u-line>
			<view class="u-page">
				<u-list @scrolltolower="scrolltolower" style="height:700px;">
					<u-list-item v-for="(item, index) in indexList" :key="index" style="padding: 24rpx;">
						<view style="display: flex;align-items: center;">
							<view style="width:80%;">
								<view style="display: flex;width:45%;margin-bottom:5px;">
									<a>ui设计师</a>
									<u-button v-if="index==0" style="width: 5px;" :hairline="true" type="error"
										size="mini" :plain="true" text="急聘"></u-button>
								</view>
								<view style="display: flex;color: #ccc;">
									<a style="margin-right: 10px;font-size: 24rpx;">微品优</a>
									<a style="margin-right: 10px;font-size: 24rpx;">20-99人</a>
									<a style="margin-right: 10px;font-size: 24rpx;">未融资</a>
								</view>
							</view>
							<a style="color: #1872FF;font-size: 18px;width: 20%;text-align: right;">4-8K</a>
						</view>
						<view style="display: flex;color: #ccc;margin: 5px 0;width: 80%">
							<u-button v-for="items in list3" style="width: 5px;margin-left: 0;" :hairline="true"
								type="info" size="mini" :plain="true" :text="items.name"></u-button>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;color: #ccc;margin: 5px 0;align-items: center;">
								<u-avatar :src="src"></u-avatar>
								<a style="color: #111111;margin-left: 5px;">向先生.人力行...</a>
							</view>
							<a style="color: #B8B8B8;">武昌区水果湖</a>
						</view>
						<u-line style="margin-top: 14rpx;"></u-line>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				list1: [{
					name: 'UI设计师',
				}],
				list2: [{
					name: '推荐',
				}, {
					name: '附近',
				}],
				list3: [{
					name: '5-10年',
				}, {
					name: '本科',
				}, {
					name: '视觉设计',
				}, {
					name: '交互设计',
				}, {
					name: '客户端',
				}],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topSearch {
		background: #108FF6;
		padding: 16rpx 20rpx 40rpx 20rpx;

		.search {
			background-color: #fff;
		}
	}
</style>